<template>
  <div>
    <!-- //!在模板中使用 ref 类型的数据，会自动解包（会自动加 .value） -->
    <p>age: {{age}}</p>
    <button @click="handleAdd">+1</button>
  </div>
</template>

<script>
import { ref, isRef } from 'vue'

export default {
  setup () {
    // !ref 可以把任何数据包装成响应式的对象（尤其是简单数据类型）
    const age = ref(18)
    console.log(isRef(age)) // true
    // 在 JS 中使用 ref 类型的数据，要加 .value
    const handleAdd = () => {
      age.value++
    }
    return {
      age,
      handleAdd
    }
  }
}
</script>
